<!doctype html>
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>教师端作业批改</title>
		<meta name="description" content="Ela Admin - HTML5 Admin Template">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
		<link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
		<link rel="stylesheet" href="assets/css/lib/datatable/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/style.css">

		<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
		<script src="assets/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
	</head>
	<body>
		<!-- Left Panel -->

		<aside id="left-panel" class="left-panel">
			<nav class="navbar navbar-expand-sm navbar-default">

				<div id="main-menu" class="main-menu collapse navbar-collapse">
					<ul class="nav navbar-nav">

						<li class="menu-title">菜单</li><!-- /.menu-title -->
						<li>
							<a href="tea-dataOfClass.html"> <i class="menu-icon fa fa-users"></i>班级 </a>
						</li>
						<li>
							<a href="tea-dataOfStudent.html"> <i class="menu-icon fa fa-file-word-o"></i>班级学生信息 </a>
						</li>
						<li>
							<a href="tea-dataOfHomeworkModify.html"> <i class="menu-icon fa fa-envelope-open-o"></i>批改作业</a>
						</li>
						<li class="menu-title">退出</li><!-- /.menu-title -->
						<li ">
							<a href="loginteacher.html"> <i class="menu-icon fa fa-user-o"></i>退出登录 </a>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</nav>
		</aside><!-- /#left-panel -->

		<!-- Left Panel -->

		<!-- Right Panel -->

		<div id="right-panel" class="right-panel">

			<!-- Header-->
			<header id="header" class="header">
				<div class="top-left">
					<div class="navbar-header">
						<a class="navbar-brand" href="#"><i class="menu-icon fa fa-user-circle fa-2x"></i></a>

					</div>
				</div>

			</header><!-- /header -->
			<!-- Header-->

			<div class="breadcrumbs">
				<div class="breadcrumbs-inner">
					<div class="row m-0">


					</div>
				</div>
			</div>

			<div class="content">
				<div class="animated fadeIn">
					<div class="row">

						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<strong class="card-title">学生作业提交信息</strong>
								</div>
								<div class="card-body" id="apphw">
									<div class="table table-striped table-bordered">
										<span class="badge badge-info">当前选中的学生：{{currentstudent}}</span>
										
										<table class="table ">
											<thead>
												<tr>
													<th>#</th>
													<th class="serial">作业ID</th>
													<th class="avatar">作业标题</th>
													<th>notes</th>
													<th>当前作业轮数</th>
													<th>当前分数</th>
													<th>教师评语</th>
													<th>批改分数</th>
													<th>修改评语</th>
													
													<th>下载作业</th>
													<th>提交批改结果</th>
												</tr>
											</thead>
											<tbody >
												<tr v-for="(item,index) in hwdatas">
													<td>{{index+1}}</td>
													<td class="serial">{{item.jid}}</td>
													<td> {{item.title}}</td>
													<td> <span class="name">{{item.note}}</span> </td>
													<td> <span class="product">{{item.number}}</span> </td>
													<td> <span class="count">{{item.score}}</span></td>
													<td> <span class="count">{{item.comment}}</span> </td>
													<td>
														<input  :id="homeworkscore(index)" type="text" placeholder="批改分数" class="col-md-4">
													</td>
													<td>
														<input  :id="homeworkcomment(index)" type="text" placeholder="修改评语" class="col-md-">
													</td>
														
													<td>
														<input class="btn btn-primary" type="button" value="Download" @click="SelectDownload(item.jid,index)">
													</td>
													<td>
														<input class="btn btn-success" type="button" value="Submit" @click="SelectModify(item.jid,index)">
													</td>
												</tr>
											</tbody>
										</table>
									</div> <!-- /.table-stats -->
								</div>
							</div>
						</div>


					</div>
				</div><!-- .animated -->
			</div><!-- .content -->


			<!-- /#right-panel -->

			<!-- Right Panel -->

			<!-- Scripts -->
			<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
			<script src="assets/js/main.js"></script>


			
			<script src="assets/js/lib/data-table/dataTables.bootstrap.min.js"></script>
			<script src="assets/js/lib/data-table/dataTables.buttons.min.js"></script>
			<script src="assets/js/lib/data-table/buttons.bootstrap.min.js"></script>
			
			
			<script src="assets/js/lib/data-table/buttons.html5.min.js"></script>
			<script src="assets/js/lib/data-table/buttons.print.min.js"></script>
			<script src="assets/js/lib/data-table/buttons.colVis.min.js"></script>
			<script src="assets/js/init/datatables-init.js"></script>


			<script type="text/javascript">
				let vm = new Vue({
					el: '#apphw',
					data: {
						hwdatas: [],
						currentstudent:window.localStorage.getItem('TselectStudentName')
					},
					mounted() {
						this.GetNewPages();
					},
					methods: {
						//v-bind
						homeworkscore(index){
							
							return 'homeworkscore'+index;
						},
						homeworkcomment(index)
						{
							return 'homeworkcomment'+index;
						},
						//下载文件
						SelectDownload(jid) {
							//alert('现在你选择的下载的作业是：' + jid); //验证选择
							//
							var jobid = jid;
							var urls='http://172.81.214.138:8000/job_download?jobid='+jobid ;
							console.log(urls);
							window.location.assign(urls);
						},
						
						//修改分数
						SelectModify(jid,index) {
							console.log(index);
							var score=document.getElementById('homeworkscore'+index).value;
							var comment=document.getElementById('homeworkcomment'+index).value;
							console.log(score);
							alert('现在你选择修改的作业' + jid + ' 的分数是:' + score +' ；评语是：'+ comment); //验证选择
							
							axios.get(
									'http://172.81.214.138:8000/give_score?jobid=' + jid + '&score=' + score +'&comment='+comment)
								//成功返回
								.then(response => {
									console.log(response);
									if (response.data.state == 1) {
										alert('作业批改成功');
										//convertRes2Blob(response);
										this.GetNewPages();
										document.getElementById('homeworkscore'+index).value.innerText="";
										document.getElementById('homeworkcomment'+index).value.innerText="";
									} else {
										alert('批改失败！');
									}
								})
								//失败返回
								.catch(error => {
									console.log(error);
								})
						},
						
						GetNewPages(){
							var sid = window.localStorage.getItem('TselectStudent'); //获学号
							var cid = window.localStorage.getItem('TselectClass'); //取班级
							// var classdata=1;
							// window.localStorage.setItem('test',classdata);
							//console.log(sid);
							axios.get(
									'http://172.81.214.138:8000/job_search?username=' + sid + '&classid=' + cid )
								//成功返回
								.then(response => {
									//console.log(response);
									if (response.data.state == 1) {
										//alert('获取作业成功');
										//console.log(response);
										this.hwdatas = response.data.data.data;
										//console.log(this.hwdatas);
										
									} else {
										alert('获取失败！');
									}
								})
								//失败返回
								.catch(error => {
									console.log(error);
								})
						},
						
						Download(url,jobid) {
								const download = (url, resOpts = {}) => {
								const {
									type = 'get', data = jobid
								} = resOpts
								console.log(url);
								//console.log(resOpts);
								const queryArgs = {
									url,
									method: type,
									data: jobid,
									headers: {
										Accept: 'application/json',
										'Content-Type': 'application/json; charset=utf-8',
										withCredentials: true,
									},
								}
								// tips: 这里直接返回的是response整体!
								this.convertRes2Blob(Axios.request(queryArgs).catch(err => console.log(err)))   ;
							}
						},
						convertRes2Blob(response) {
						  // 提取文件名
						  const fileName = response.headers['content-disposition'].match(
						    /filename=(.*)/
						  )[1]
						  console.log(fileName);
						  // 将二进制流转为blob
						  const blob = new Blob([response.data], { type: 'application/octet-stream' })
						  if (typeof window.navigator.msSaveBlob !== 'undefined') {
						    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
						    window.navigator.msSaveBlob(blob, decodeURI(filename))
						  } else {
						    // 创建新的URL并指向File对象或者Blob对象的地址
						    const blobURL = window.URL.createObjectURL(blob)
						    // 创建a标签，用于跳转至下载链接
						    const tempLink = document.createElement('a')
						    tempLink.style.display = 'none'
						    tempLink.href = blobURL
						    tempLink.setAttribute('download', decodeURI(filename))
						    // 兼容：某些浏览器不支持HTML5的download属性
						    if (typeof tempLink.download === 'undefined') {
						      tempLink.setAttribute('target', '_blank')
						    }
						    // 挂载a标签
						    document.body.appendChild(tempLink)
						    tempLink.click()
						    document.body.removeChild(tempLink)
						    // 释放blob URL地址
						    window.URL.revokeObjectURL(blobURL)
						  }
						}
					}
				})
			</script>


	</body>
</html>
